昨天我們成功存取本地檔案，今天來試著連接遠端的 API。

我們先用 PostMan 測試一下創建帳號的 API:

確定API是可以動作的。body 這邊我們要傳的是 json 格式，所以資料格式的地方我們選 raw-data，放入一個 json 物件。視窗下面會是我們的 response。
如果再傳一次 request，等於再申請一次帳號，所以就會有這樣的回傳訊息：

我們把 API 實作到 post function 上：

 // http.service.ts
 
  Register(data) {

    console.log(data);

    this.http.post('https://quiet-lake-94208.herokuapp.com/api/user/new', data)
    .subscribe((result) => {
      console.log(result);
    },
    (error) => {
      console.log(error);
    });
  }

這邊的 data 是我們傳入的 login 資訊，post 的第一個參數放入目標 URL，所以我們填入 https://quiet-lake-94208.herokuapp.com/api/user/new 第二個參數放入要傳的 data，Angular 會轉成適當的 json 格式，幫我們送出。

這次我們傳入兩個 callback function 作為參數，第一個 function 和 get() 一樣，接到結果時，將結果印出。第二個 function 是只有當錯誤發生時，才會執行，並將錯誤訊息印出。

所以我們預期的是，送出 request 後，收到正確的 result 並印出。

我們執行看看：

發現執行失敗，看一下錯誤訊息，是被 CORS 政策阻擋，也就是說，我們跟遠端伺服器在不同的網域，不能夠存取。

這個問題我在保哥的文章找到了解答。我們照著他的方法做一遍。

在專案根目錄新增 proxy.config.json：

填入下面資訊：

{
 "/api": {
 "target": "https://quiet-lake-94208.herokuapp.com/",
 "secure": "false",
 "changeOrigin": true
  }
}

如保哥文章所說，當我們嘗試存取 http://localhost:4200/api 時，就會被轉發到 https://quiet-lake-94208.herokuapp.com/api。

設定完 proxy.config.json 後，記得在 Angular.json 找到 "serve"，加入 "proxyConfig": "proxy.config.json"。

"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
 "browserTarget": "Sponge-Website:build",
 "proxyConfig": "proxy.config.json"
         },

這樣一來，在我們下 ng serve 時，原先要打一長串的指令來載入 proxy-config參數

ng serve --proxy-config proxy.config.json

加入 proxyConfig 之後，我們一樣下 ng serve 就行了。

如果你是下 npm start 來開啟測試伺服器的話，記得到 package.json，修改 "scripts"：

然後修改 this.http.post() 的 url， 將

https://quiet-lake-94208.herokuapp.com/api/user/new

改成

/api/user/new

// http.service.ts

  Register(data) {

    console.log(data);

    this.http.post('/api/user/new', data)
    .subscribe((result) => {
      console.log(result);
    },
    (error) => {
      console.log(error);
    });
  }

再次運行：

就能成功存取遠端 API 了。